<html>
<head>
</head>
<body>
<style>
.sliderthumb{
position : absolute;
cursor : pointer;
 }
 
.sliderrange{
cursor : pointer;
 }
</style>
<script>
var offset = 0;
var isDown = false;
var active_control = null;

document.addEventListener('mouseup', function() {
    isDown = false;
}, true);

//position is based on screen position value 
function movethumb(pos)
{
    var p = pos + offset;
    var minpos =0;
    var maxpos = 0;
    var minvalue =0;
    var maxvalue = 100;
    var value=0;
    var rangeelement =null;
    if (active_control.hasAttribute('customrange')){
        rangeelement = document.getElementById(active_control.getAttribute('customrange'));
        var r = rangeelement.getBoundingClientRect();
        minpos = r.left;
        maxpos = r.right;
         if (rangeelement.hasAttribute('min')){
             minvalue = parseFloat(rangeelement.getAttribute('min'))
          }
        if (rangeelement.hasAttribute('max')){
             maxvalue = parseFloat(rangeelement.getAttribute('max'))
          }
     }
    var r2 = active_control.getBoundingClientRect();
    if ( p >maxpos - (r2.right-r2.left)) p = maxpos - (r2.right-r2.left);
    if ( p <minpos) p =minpos ;
    active_control.style.left = p+ 'px';
    if (active_control.hasAttribute('render')){
    value = (((p-minpos) * (maxvalue-minvalue))/((maxpos-minpos)- (r2.right-r2.left)))
    document.getElementById(active_control.getAttribute('render')).value = Math.round(value + minvalue) ;     
    active_control.style.cursor='pointer';
     }  
}

//position is based on range value 
function movethumbat(thumbcursor, value){
    var minvalue =0;
    var maxvalue = 100;
    var minpos =0;
    var maxpos = 0;
    var rangeelement =null;
    if (thumbcursor.hasAttribute('customrange')){
          rangeelement = document.getElementById(thumbcursor.getAttribute('customrange'));
          var r = rangeelement.getBoundingClientRect();
          minpos = r.left;
          maxpos = r.right;
          if (rangeelement.hasAttribute('min')){
             minvalue = parseFloat(rangeelement.getAttribute('min'))
          }
          if (rangeelement.hasAttribute('max')){
             maxvalue = parseFloat(rangeelement.getAttribute('max'))
          }
     }
    if (value > maxvalue) value = maxvalue;
    if (value < minvalue) value = minvalue;
    var r2 = thumbcursor.getBoundingClientRect();
    var pos=0;
    pos = ((value-minvalue)*((maxpos-minpos)-(r2.right-r2.left))/(maxvalue-minvalue))+minpos;
    thumbcursor.style.left = pos+ 'px';
    if (thumbcursor.hasAttribute('render')){
    document.getElementById(thumbcursor.getAttribute('render')).value =value; 
    }
}

document.addEventListener('mousemove', function(event) {
    event.preventDefault();
    if (isDown) {
    movethumb(event.clientX);
    }
}, true);

function rangeclicked(event,element)
{
  
    if (element.hasAttribute('customthumb')){
        active_control = document.getElementById(element.getAttribute('customthumb'));   
        offset = 0;  
        movethumb(event.clientX);
        }
}

function initthumb( element)
{
element.addEventListener('mousedown', function(e) {
    isDown = true;
    offset = element.offsetLeft - e.clientX;
    active_control = this;
}, true);
 if (element.hasAttribute('bgimage')){
    element.innerHTML = element.getAttribute('bgimage');
    }
 if (element.hasAttribute('customrange')){
     var r = document.getElementById(element.getAttribute('customrange')).getBoundingClientRect();
    element.style.top = r.top;
    element.style.left = r.left;
    }
}

function initrange( element)
{
 if (element.hasAttribute('bgimage')){
    element.innerHTML = element.getAttribute('bgimage');
    }
}
 
 
 
</script>
<table border=1>
<tr>
<td><div id='range1'  min="-10" max="270" class='sliderrange' onclick ="rangeclicked(event,this);"bgimage="<svg width='310' height='10' viewbox='0 0 310 10'><rect width='310' height='10' style='fill:rgb(255,0,255);stroke-width:3;stroke:rgb(0,0,0)' />" customthumb='thumb1'></div>
<div id='thumb1' class='sliderthumb' render='v1' bgimage="<svg width='10' height='10' viewbox='0 0 10 10'><circle cx='5' cy='5' r='5'/></svg>" customrange='range1'></div>
</td><td><input id='v1' type='number' value='0'/></td></tr>
<tr>
<td><div id='range2'  min="50" max="300" onclick ="rangeclicked(event,this);" bgimage="<svg width='310' height='10' viewbox='0 0 310 10'><rect width='310' height='10' style='fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)' />" customthumb='thumb2'></div>
<div id='thumb2' class='sliderthumb' render='v2'  bgimage="<svg width='10' height='10' viewbox='0 0 10 10'><circle cx='5' cy='5' r='5'/></svg>" customrange='range2'></div>
</td><td><input id='v2' type='number' value='0'/></td></tr>
</table>
<input type='button' onclick='movethumbat(thumb1, inputtest.value)'  value='push me' > <input id='inputtest' type='number' />
<script>

initrange( range1);
initrange( range2);
initthumb( thumb1);
initthumb( thumb2);
</script>
</body>
</html>
